<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>三维GIS演示</title>
    <style>
        body {
            position: absolute;
            margin: 0;
            width: 100%;
            height: 100%;
        }

        #mapContainer {
            left: 0px;
            top: 0px;
            width: 100%;
            height: 100%;
            float: left;
        }
    </style>
</head>

<body>

    <div id="mapContainer" style="position: relative;">
    </div>

</body>
<!-- <script src='http://localhost:9000/examples/GiswayEngine.js'></script> -->
<!-- <script src='/GiswayEngine.js'></script> -->
<script src='/GiswayEngine.js'></script>
<script type="text/javascript">
    var cameraFov = 10; //相机视角
    var mapType = 'satellite'; //electronic
    window.app = new GE.App('mapContainer', {
        geographySystem: 'gcj02',
        //rjy_osgb_output数据  
        position: [118.76769049871781, 31.828401267358743, 3000],
        lookAt: [118.76769049871781, 31.828401267358743, 0],
        // position: [120.170646, 30.28362, 3000],
        // lookAt: [120.170646, 30.28362, 0],

        cameraScrollSpeed: 15,
        minZoom: 3,
        maxZoom: 22,
        cameraFov: cameraFov, //相机的fov
        verticalLevel: 6,
        maxSlopeAngle: 70,

        ambientLightIntensity: 2,
        ambientLightcolor: 0xffffff,//环境光照的颜色
        ambientLightType: 'ambient',//环境光照的类型，有如下类型:ambient，hemisphere
        supportLightType: 'single',//方向光的类型，有如下类型:single，double，tripple
        supportLightIntensity: 1,//方向光的强度
        supportLightcolor: '#ffffff', //方向光的颜色
        lightDistance: 2000,//方向光源距离初始相机target的距离
        lightHeight: 50,//方向光源的高度

        // extraStep: 5,
        patchLoadCount: 7,
        useCarpet: true,
        background: "Fog",
        // backGroundColor: "#A9A9A9",
        useDefaultTexture: false, //是否使用瓦片默认纹理
        isOpenCircleRange: true, //开启圆形范围可视化
        isOpenContourLine: true, //开启等高线功能
        baseLayer: [
            {
                url: 'https://webst03.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
                readableUrl: true,
                tileType: 'image', //图层的类型
                name: 'imageLayer', //图层的名字
                maxDataLevel: 18,
                colorSpace: 'srgb', //'', 
                isBackgroundLayer: true, //该图层是否作为地图的背景图层，一般背景图层都放在所有图层的最下面
            }
        ]
    });


    window.app.on('Click', function (e) {
        console.log(e.lnglat);
    });


    var threeTileModel;
    tiles3d(); //加载倾斜摄影数据
    function tiles3d() {
        threeTileModel = new GE.Tiles3d({
            url: 'https://gisdata.t-aaron.com/3dTiles/rjy/rjy_osgb_output/tileset.json', refinement: 1000, loadRange: 0,//rjy_osgb_output数据
            // url: 'http://localhost:9009/examples/resources/osgb/银杏湖/tileset.json', refinement: 100, loadRange: 0,//银杏湖数据
            z: -10, //调整数据的高度
            minSize: 500,
            maxSize: 3000,
            // minSize: 10,
            // maxSize: 50,
            maxBytesSize: 0.3 * 2 ** 10,
            minByteSize: 0.2 * 2 ** 10,
            screenErrorFactor: 1.5, //屏幕误差缩放的倍数
            isOpenAdditionalCamera: false, //是否添加预加载的额外相机
            additionCameraFov: cameraFov * 2, //额外相机的fov
            unloadPercent: 1,
            maxJobs: 15,
            canNotSelect: false, //true表示该图层不参与射线拾取，false表示图层参与射线拾取
            isSupportTransparent: false,
            isDoubleSide: false, //是否开启双面渲染
            // dracoGltfPath: 'http://localhost:9009/examples/resources/plugin/draco/gltf/', //draco压缩的gltf文件解压后存放的路径
            // dracoGltfPath: 'http://192.168.50.155:9009/examples/resources/plugin/draco/gltf/', //draco压缩的gltf文件解压后存放的路径
            dracoGltfPath: 'https://gisdata.t-aaron.com/3dTiles/rjy/draco/',
            isCloseGround: true, //是否贴近地面
            isReplaceMaterial: true,
            isComputeBox: true, //计算各个瓦片的包围盒
        });
        app.add(threeTileModel);
        window.tiles3d = threeTileModel;
    }



    var loadedModelCount = 0;
    var isHasdAircraftModel = false; //加载无人机模型是否成功
    // var aircraftModel1; //无人机模型
    // var aircraftModel2;
    var airportPosition = new GE.Point(118.77027900885972, 31.82784694165648, 22, 'gcj02');
    // var simulatorInitPosition = new GE.Point(118.7704590898906, 31.827049029444524, 60, 'gcj02'); 
    var simulatorInitPosition = new GE.Point(118.77027900885972, 31.82784694165648, 60, 'gcj02');
    function loadFbx(modelUrl, scale, isComputeBox, flyPath) {
        var model = new GE.OverLay({
            type: 'fbx',
            url: modelUrl,
            scale: [scale, scale, scale],
            actionTimeScale: 10,
            isComputeBox: isComputeBox, //计算各个瓦片的包围盒
            success: function (modelScene) {
                loadedModelCount++;
                // if (loadedModelCount == 2) {
                loadedModelCount = 0;
                isHasdAircraftModel = true;

                var aircraftModel;
                if (model.parent instanceof GE.OverLay) {
                    aircraftModel = model.parent;
                } else {
                    aircraftModel = model;
                }

                model.visible = true;
                const boundingBox = new GE.three.Box3();
                // 递归计算对象A及其所有子对象的包围盒
                boundingBox.setFromObject(model);

                // 获取包围盒尺寸
                const size = new GE.three.Vector3();
                boundingBox.getSize(size);

                let maxSize = Math.max(size.x, size.y, size.z);
                let targetSize = 30;
                let scaleFactor = targetSize / maxSize;
                model.scale.set(scaleFactor, scaleFactor, scaleFactor);

                setTimeout(() => {
                    wander(model, flyPath);
                }, 1500);

                // }
            }
        });
        return model;
    }

    function loadAircraftModel(flyPath) {
        let aircraftModel = loadFbx('/examples/resources/fbx/wurenji3.fbx', 1, true, flyPath);
        aircraftModel.up.x = 0; aircraftModel.up.y = 0; aircraftModel.up.z = 1;  //提供模型的朝向信息，不然模型移动的时候可能会出现朝向错误
        aircraftModel.renderOrder = 4;
        let aircraftModelPosition = flyPath[0].toEPSGWeb();
        aircraftModel.position.copy(aircraftModelPosition);
        aircraftModel.visible = false;
        app.add(aircraftModel);


        // var directionModel = loadFbx('/examples/resources/fbx/direction1.fbx', 0.2, true, flyPath);
        // directionModel.position.y += 10;
        // directionModel.position.z += 55;
        // directionModel.rotateX(-Math.PI / 2);
        // aircraftModel.add(directionModel);

        return aircraftModel;
    }

    let flyPath1 = [ //3857表示web墨卡托坐标系，4326表示经纬度坐标
        new GE.Point(118.77017020344424, 31.82665686117461, 90.375527465785932, 'gcj02'),
        new GE.Point(118.77003841882818, 31.82704628052984, 90.375527465785932, 'gcj02'),
        new GE.Point(118.77088466769877, 31.82644871893714, 90.375527465785932, 'gcj02'),
        new GE.Point(118.77147564743453, 31.826762519717317, 90.375527465785932, 'gcj02'),
        new GE.Point(118.77320505491424, 31.82678087701113, 90.375527465785932, 'gcj02'),
        new GE.Point(118.77517450626371, 31.82694271482343, 90.375527465785932, 'gcj02'),
        new GE.Point(118.77423750578019, 31.82964350291833, 90.375527465785932, 'gcj02'),
        new GE.Point(118.77154866358676, 31.829477734465414, 90.375527465785932, 'gcj02'),
        new GE.Point(118.77004116482033, 31.82936719071641, 90.375527465785932, 'gcj02'),
        new GE.Point(118.77027736971546, 31.82786581621703, 51, 'gcj02'),
    ];

    let flyPath2 = [ //3857表示web墨卡托坐标系，4326表示经纬度坐标
        new GE.Point(118.77178981812874, 31.828604456793816, 160.375527465785932, 'gcj02'),
        new GE.Point(118.77447521201165, 31.829020177506475, 160.375527465785932, 'gcj02'),
        new GE.Point(118.77525947874439, 31.826937454032276, 160.375527465785932, 'gcj02'),
        new GE.Point(118.77152313684422, 31.82647961619339, 160.375527465785932, 'gcj02'),
        new GE.Point(118.7714579999694, 31.829400700110565, 160.375527465785932, 'gcj02'),
        new GE.Point(118.77305045206344, 31.829533224886376, 160.375527465785932, 'gcj02'),
        new GE.Point(118.77423750578019, 31.82964350291833, 160.375527465785932, 'gcj02'),
        new GE.Point(118.77322029512625, 31.827912164712142, 160.375527465785932, 'gcj02'),
        new GE.Point(118.7718204300306, 31.828642331136813, 51, 'gcj02')
    ];

    let flyPath3 = [ //3857表示web墨卡托坐标系，4326表示经纬度坐标
        new GE.Point(118.77307637579388, 31.828614808416795, 92.375527465785932, 'gcj02'),
        new GE.Point(118.7743853274706, 31.828659910916834, 280.375527465785932, 'gcj02'),
        new GE.Point(118.77327701128903, 31.82668134792366, 280.375527465785932, 'gcj02'),
        new GE.Point(118.77276635697567, 31.829475629550128, 280.375527465785932, 'gcj02'),
        new GE.Point(118.77458143014529, 31.828742870756095, 280.375527465785932, 'gcj02'),
        new GE.Point(118.7720936070446, 31.826820622283794, 280.375527465785932, 'gcj02'),
        new GE.Point(118.7731380935854, 31.82862716452589, 92.375527465785932, 'gcj02')
    ];

    let flyPath4 = [ //3857表示web墨卡托坐标系，4326表示经纬度坐标
        new GE.Point(118.77274753405611, 31.82756004790409, 68.375527465785932, 'gcj02'),
        new GE.Point(118.7725380331439, 31.829032220721025, 220.375527465785932, 'gcj02'),
        new GE.Point(118.77396273775608, 31.828493305704, 220.375527465785932, 'gcj02'),
        new GE.Point(118.7723271807603, 31.827115862836695, 220.375527465785932, 'gcj02'),
        new GE.Point(118.77200208120884, 31.828949478618338, 220.375527465785932, 'gcj02'),
        new GE.Point(118.77309106844501, 31.828297114576213, 220.375527465785932, 'gcj02'),
        new GE.Point(118.77316131382665, 31.82725497221423, 220.375527465785932, 'gcj02'),
        new GE.Point(118.77400217430562, 31.828149922414763, 220.375527465785932, 'gcj02'),
        new GE.Point(118.77273066164804, 31.827674650703365, 68.375527465785932, 'gcj02')
    ];

    let aircraftModel1 = loadAircraftModel(flyPath1); //加载无人机模型
    
    // loadAircraftModel(flyPath2); //加载无人机模型
    // loadAircraftModel(flyPath3); //加载无人机模型
    // loadAircraftModel(flyPath4); //加载无人机模型

    function wander(model, flyPath) {//物体漫游的功能
        let objWander = new GE.ObjWander(model, "/examples/resources/image/lensflare0.png",); //模型漫游的功能，该功能对模型的朝向有要求：模型的正面需要Z轴朝上

        let path = new Array();//漫游的路径
        flyPath.forEach(element => {
            path.push({ objPosition: element });
        });

        objWander.wander(path, 60000, function () { //漫游结束的回调事件
            objWander.dispose();
            wander(model, flyPath);
            // window.app.mouse.addHoverObject(model); //为该模型添加鼠标悬停的功能
            // window.app.mouse.removeHoverObject(model); //为该模型移除鼠标悬停的功能
        })
    }

    NoFlyZone();

    function NoFlyZone() { //设置禁飞区
        let pointArray = [ //3857表示web墨卡托坐标系，4326表示经纬度坐标
            new GE.Point(118.77164719517305, 31.826185186399954, 10, 'gcj02'),
            new GE.Point(118.77165451558119, 31.825325273961802, 10, 'gcj02'),
            new GE.Point(118.77310254703558, 31.825342226915307, 10, 'gcj02'),
            new GE.Point(118.77296177833291, 31.82622920795411, 10, 'gcj02'),
            new GE.Point(118.77164719517305, 31.826185186399954, 10, 'gcj02'),
            // new GE.Point(13376713.90129997, 3540579.2959903134, 0, '3857'),
        ];
        let lineData = {
            pointArray: pointArray,  //多边形的顶点数组
            color: '#DC143C',
            lineWidth: 5,  //线的宽度
            depthTest: true
        };
        let polyline = new GE.Polyline(lineData);
        app.add(polyline);

        initPOI(new GE.Point(118.77232065163123,  31.82582181421955, 20, 'gcj02'), '禁飞区', '#FF6B6B');
    }

    limitHightArea();

    function limitHightArea() {
        let pointArray = [ //3857表示web墨卡托坐标系，4326表示经纬度坐标
            new GE.Point(118.76986426508128, 31.825571137562193, 0, 'gcj02'),
            new GE.Point(118.76983660406138, 31.825257652414233, 0, 'gcj02'),
            new GE.Point(118.77064264742246, 31.82523092173991, 0, 'gcj02'),
            new GE.Point(118.770677395381, 31.82559512005761, 0, 'gcj02'),
            // new GE.Point(13377184.375437068, 3540339.2581293588, 0, '3857')
        ];

        let buildingData = {
            pointArray: pointArray,  //多边形的顶点数组
            solidHeight: 120, //建筑的高度
            solidColor: '#0000FF', //建筑的颜色
            solidAlpha: 0.2,  //建筑的透明值
            hasBorder: true, //建筑是否带边框, 默认值为false
            isEmptyBuilding: false, //是否不显示实体建筑，默认值为false
            lineColor: '#DC143C', //边框线的颜色
            lineApha: 0.2, //边框线的透明度, 默认值是1
        };

        let building = new GE.Building(buildingData);
        app.add(building);

        initPOI(new GE.Point(118.7702595288811, 31.825423057835053, 120, 'gcj02'), '限高区120米', '#FF6B6B');
    }

    function initPOI(point,text, textColor) {
        let poiConfig = {
            position: point,
            name: text,
            size: 100,
            showText: true,
            center: [0.5, 0.0],
            depthTest: true,
            defaultShape: 'square',
            shapeSize: 2.5,
            textStyle: textColor,
            shapeColor: textColor,
            shapeStrokeWidth: 0,
        };
        const poi = new GE.Poi2(poiConfig);
        poi.updateTextLayout('text-only');
        app.add(poi);
    }


    function initHeightAnalysis() { //初始化高度分析
         //初始化要显示的标注的html内容
        const div = document.createElement('div');
        div.className = 'label';
        div.style.backgroundColor = 'transparent';
        //初始化标注组件，并将htmlelement作为参数传入，这里是一个div
        let label = new GE.HtmlMarker(div);
        //设置组件在三维场景中的位置
        // let position = point.toEPSGWeb();; //;
        // label.position.set(position.x, position.y, 0);
        //设置对其方式，0,0为中心对齐
        label.center.set(-0.1, 0.5);
        label.openCollisionCheck(); //开启marker的碰撞检测
        //将组件添加至场景中
        app.add(label);

        app.mouse.addRaycasterType('MouseMove');  //如果要精确的获取鼠标在地图上的位置，一定要调用这段代码，会对性能有所影响。
        app.on('MouseMove', function(e){
            let height = e.lnglat.z;
            //对height四舍五入保留两位小数
            height = Math.round(height * 100) / 100;

            label.position.copy(e.lnglat.clone().toEPSGWeb());
            label.element.textContent = '高度: ' + height;
            label.visible = true;
        });
    }
    initHeightAnalysis();


</script>

</html>